<template>
  <div class="markdown-page">
    <t-card class="q-pa-md" style="position: sticky; top: 0">
      <div class="head-card-content flex">
        <div class="setting q-mr-md">
          <t-radio-group
            label="选择渲染工具库"
            helpPlacement="right"
            helpMore="link"
            helpMoreLink="static"
            v-model="mdTool"
            :options="[
              { label: 'markdown-vue', value: 'markdown-vue', disable: true },
              { label: 'vue-markdown', value: 'vue-markdown', disable: true },
              {
                label: 'v-md-editor',
                value: 'v-md-editor',
                disable: true,
              },
              { label: 'marked', value: 'marked' },
              { label: 'markdown-it', value: 'markdown-it', disable: false  },
            ]"
          />

          <t-radio-group
            label="浅色/深色主题"
            helpPlacement="right"
            v-model="mdTheme"
            :options="[
              // { label: '不使用', value: '' },
              { label: 'light', value: 'light' },
              { label: 'dark', value: 'dark' },
              // { label: 'Vuepress', value: 'vuepress' },
            ]"
          />
          <t-radio-group
            label="代码块主题"
            helpPlacement="right"
            v-model="codeTheme"
            :options="[
              // { label: '不使用', value: '' },
              { label: 'light', value: 'github' },
              { label: 'dark', value: 'github-dark' },
            ]"
          />
          <t-checkbox label="链接文字用特来电系统主题色" v-model="isTeldThemeLink" color="teal" />
        </div>

        <!-- md文本内容 -->
        <div
          class="editor flex flex-col"
          style="flex: 1; position: relative; height: 200px"
        >
          <t-textarea
            v-model="editorTxt"
            :rows="20"
            :minHeight="200"
            :autoResizeEnabled="false"
            class="full-height"
            style="height: 200px !important; resize: none; width: 100%"
          />
          <t-button
            color="primary"
            @click="onClickReset"
            class="q-mt-sm"
            style="position: absolute; right: 20px"
            >重置</t-button
          >
        </div>
      </div>
    </t-card>

    <div class="flex q-py-md" style="align-items: start">
      <div class="previewer" style="border: 1px solid #d2d2d2; flex: 1">
        <component
          :is="mdRenderer"
          :source="editorTxt"
          :data-theme="mdTheme"
          :code-theme="codeTheme"
          :class="{
            'q-pa-md': true,
            'markdown-body': !!mdTheme,
            'teld-theme-link': isTeldThemeLink,
          }"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

import mdContent from './md-content';

import MarkdownIt from './markdown-it/demo.vue';
import Marked from './marked/demo.vue';

// markdown基本样式，区分light和dark
import './styles/github-markdown.css';
import './styles/custom.scss';
// // 代码块样式
import './styles/github.scss';
import './styles/github-dark.scss';

// import 'highlight.js/styles/github.css';
// import 'highlight.js/styles/github-dark.css'
// import 'highlight.js/styles/arta.css'
// import 'highlight.js/styles/atom-one-light.css'
// import 'highlight.js/styles/atom-one-dark.css'

const editorTxt = ref(mdContent);
const mdTool = ref('markdown-it');
const mdRenderer = computed(() => {
  switch (mdTool.value) {
    // case 'markdown-vue':
    //   return MarkdownVue;
    // case 'vue-markdown':
    //   return VueMarkdown;
    // case 'v-md-editor':
    //   return VMdEditor;
    case 'marked':
      return Marked;
    case 'markdown-it':
      return MarkdownIt;
    default:
      return Marked;
  }
});
const mdTheme = ref('light');
const codeTheme = ref('github');
const isTeldThemeLink = ref(true);

const onClickReset = () => {
  editorTxt.value = mdContent;
};
</script>

<style lang="scss" scoped>
.markdown-page {
  .editor {
    ::v-deep(textarea) {
      height: 200px !important;
    }
  }
}
</style>
